<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template
      v-for="col in ['technicalExpertise', 'specialistType', 'numberOfSpecialist']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <j-search-select-tag
          v-if="col === 'technicalExpertise'"
          placeholder="请选择技术专长"
          v-model="record.technicalExpertise"
          :dictOptions="technicalExpertiseOption">
        </j-search-select-tag>

        <j-search-select-tag
          v-if="col === 'specialistType'"
          placeholder="请选择专家类型"
          v-model="record.specialistType"
          :dictOptions="specialistTypeOption">
        </j-search-select-tag>

        <a-input-number id="inputNumber" v-if="col === 'numberOfSpecialist'" v-model="record.numberOfSpecialist" :min="1" :max="10"/>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <span>
          <a-button
            type="primary"
            shape="circle"
            icon="plus"
            @click="() => addItem(record.key)"
          />
          <a-button
            type="primary"
            shape="circle"
            icon="minus"
            @click="() => deleteItem(record.key)"
          />
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import { initDictOptions } from '@/components/dict/JDictSelectUtil'

  const columns = [
    {
      title: '技术专长',
      dataIndex: 'technicalExpertise',
      width: '30%',
      scopedSlots: { customRender: 'technicalExpertise' },
    },
    {
      title: '专家类型',
      dataIndex: 'specialistType',
      width: '30%',
      scopedSlots: { customRender: 'specialistType' },
    },
    {
      title: '人数',
      dataIndex: 'numberOfSpecialist',
      width: '20%',
      scopedSlots: { customRender: 'numberOfSpecialist' },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
    },
  ]

  const data = []
  data.push({
    key: data.length,
    technicalExpertise: '',
    specialistType: '',
    numberOfSpecialist: 1,
  })
  export default {
    components: {JSearchSelectTag},
    name: "RandomSpecialistFilter",
    data () {
      return {
        key: 0,
        data,
        columns,
        editingKey: '',
        technicalExpertiseOption: [],
        specialistTypeOption: []
      }
    },
    created: function(){
      this.initDictConfig();
    },
    methods: {
      addItem (key) {
        this.data.splice(key + 1, 0, {
          key: '',
          technicalExpertise: '',
          specialistType: '',
          numberOfSpecialist: '1',
        })
        this.data.forEach((item, index) => {
          item.key = index
        })
      },
      deleteItem (key) {
        if (this.data.length === 1) {
          return
        }
        this.data.splice(key, 1)
        this.data.forEach((item, index) => {
          item.key = index
        })
      },
      initDictConfig() {
        //初始化字典 - 技术专长
        initDictOptions('technical_expertise').then((res) => {
          if (res.success) {
            this.technicalExpertiseOption = res.result;
          }
        });
        //初始化字典 - 专家类型
        initDictOptions('specialist_type').then((res) => {
          if (res.success) {
            this.specialistTypeOption = res.result;
          }
        });
      },
    },
  };
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>

